<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
	<title>card</title>
	<style type="text/css">.infinite-scroll-preloader {margin-top:-20px;}</style>
	<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.css">
	<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.js' charset='utf-8'></script>
	<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.js' charset='utf-8'></script>
	<script type="text/javascript" src="../js/utils.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/books.css">
    <link rel="stylesheet" type="text/css" href="../css/words.css">
</head>
<body>
	<div class="page-group" id="page-home" >
        <div class="page page-current">
            <header id="header" class="bar bar-nav">
                <h1 class="title" style="background:rgb(238,238,238);color:black">电子书</h1>
            </header>
            <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
                <div class="card" style="margin:0;">
                    <div class="list-block media-list">
                        <ul id="list" class="list-container">
                        </ul>
                    </div>
                </div>
                <!-- 加载提示符 -->
                <div class="infinite-scroll-preloader">
                    <div class="preloader"></div>
                </div>
            </div>
        </div>
    </div>

	<script type="text/javascript">
		$(function() {
			// 加载flag
			var loading = false;
			// 最多可加载的条目
			var maxItems = 21;

			// 每次加载添加多少条目
			var itemsPerLoad = 7;

			// AjaxIO.post("/getMarkJson",{loginId: "admin", password: "666666"},function (results) {
   //              for (var i = result.length-1; i >= 0; i--) {
   //                  alert(result)
   //              }
   //      	});

			function addItems(number, lastIndex) {
                // 生成新条目的HTML
                AjaxIO.post("/getEbookJson", {
                    loginId: "admin",
                    password: "666666"
                }, function(results) {

                    var html = '';
                    for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
                        html += '<li class="item-content"  id="iden" style="background:#f4f6f7;border-bottom:1px solid #dfe5ee"><div class="item-media"><img width="60" height="80" src=' + results[i].data.imageUrl + '></div><div class="item-inner" ><div class="item-title" style="font-size:1em;;margin-top:0;">' + results[i].data.bookName + '</div><div class="item-subtitle" style="font-size:0.7em;color:orange;overflow:hidden">' + results[i].data.review + '</div><div class="item-subtitle" style="font-size:0.7em;margin-top:10px">' + results[i].data.reading + '</div></div></li>';
                        
                    }

                    // 添加新条目
                    $('.infinite-scroll-bottom .list-container').append(html);


                });

            }
            

            

			//预先加载20条
			addItems(itemsPerLoad, 0);

            

			// 上次加载的序号

			var lastIndex = 7;

			// 注册'infinite'事件处理函数
			$(document).on('infinite', '.infinite-scroll-bottom',function() {

				// 如果正在加载，则退出
				if (loading) return;

				// 设置flag
				loading = true;

                // alert(lastIndex)
				// 模拟1s的加载过程
				setTimeout(function() {
					// 重置加载flag
					loading = false;

					if (lastIndex >= maxItems) {
						// 加载完毕，则注销无限加载事件，以防不必要的加载
						$.detachInfiniteScroll($('.infinite-scroll'));
						// 删除加载提示符
						$('.infinite-scroll-preloader').remove();
						return;
					}

					// 添加新条目
					addItems(itemsPerLoad, lastIndex);
					// 更新最后加载的序号
					lastIndex += 7;
					//容器发生改变,如果是js滚动，需要刷新滚动
					$.refreshScroller();
				}, 1000);


			});

            

            $(".item-content").live('click', function() {
                // alert("运行了"
                var index = $(this).index() + 1
                localStorage.setItem("index",index+"");
                $.router.load("ebookDetailView.html");  //加载ajax页面

            });


            
	})
         
	</script>
    <script type="text/javascript">
         $(document).on("pageInit", "#page-home", function(e, pageId, $page) {
            try{
                responesToPhone(false)   
             } catch(error){
                console.log('捕捉到错误')
             }

         })

    </script>

    <script>
     $(document).on("pageInit", "#page-detail", function(e, pageId, $page) {

         var Mycollect = document.getElementById("Mycollect");
         var star = document.getElementById("star");
         var collect = document.getElementById("collect");
         var isClicked = false;
         var phonenumber = localStorage.getItem("phonenumber")
         var bookTag = localStorage.getItem("index")

        AjaxIO.post('/isCollection', {
            phonenumber: phonenumber,
            tag:bookTag
        }, function(isSuccess) {
            if (isSuccess) {
                collect.style.color = 'rgba(114,184,230,1)';
                star.style.color = 'rgba(114,184,230,1)';

            } else {
                collect.style.color = 'rgba(161,161,161,1)';
                star.style.color = 'rgba(161,161,161,1)';

            }
        });
  

         $('#collect').click(function(){

            AjaxIO.post('/addCollection', {phonenumber: phonenumber,bookTag:bookTag}, function(isSuccess) {
                    if (!isClicked) {
                        collect.style.color = 'rgba(114,184,230,1)';
                        star.style.color = 'rgba(114,184,230,1)';
                        isClicked = true
                    } else {
                        collect.style.color = 'rgba(161,161,161,1)';
                        star.style.color = 'rgba(161,161,161,1)';
                    }
                    

            });
         })
         var username = $('#name').val();
         var password = $('#password').val();

         var index = localStorage.getItem("index")
             // alert(localStorage.index)
         AjaxIO.post("/getEbookDetailJson", {
                 index
             },
             function(result) {
                 // alert(result)
                 $('#image').attr("src", result.data.imageUrl);
                 $('#Mybook').html(result.data.bookName);
                 $('#bookname').html(result.data.bookName);
                 $('#author').html(result.data.author);
                 $('#introduce').html(result.data.review);

             });
         try{
            responesToPhone(true)   
         } catch(error){
            console.log('捕捉到错误')
         }


         //开始阅读

         $('#reading').click(function(argument) {
             $.router.load("ebookRead.html")
         })
         $(document).on("pageInit", "#page-read", function(e, pageId, $page) {

             var index = localStorage.getItem("index")

             AjaxIO.post("/getEbookDetailJson", {
                     index
                 },
                 function(result) {
                     $.get(result.data.bookUrl, function(data, atatus) {
                         $("textarea").html(data);
                     })
             });

            var moon_icon=document.getElementById("moon_icon");
            var bookTextarea=document.getElementById("bookTextarea");
            var sun_icon=document.getElementById("sun_icon")
            var he = document.getElementById("headerbar")
            moon_icon.onclick=function () {
                    $('body').attr("class","theme-dark");
                    bookTextarea.style.backgroundColor = 'rgba(34,36,38,1)';
                    he.style.background = 'rgba(34,36,38,1)'
                    bookTextarea.style.color="#ffffff";
                    moon_icon.style.display = 'none';
                    sun_icon.style.display = 'block';
            }
            sun_icon.onclick=function () {
                  $('body').attr("class","none");
                    bookTextarea.style.backgroundColor = 'rgba(239,239,244,1)';
                    he.style.background = 'rgba(239,239,244,1)'
                    bookTextarea.style.color="black";
                    moon_icon.style.display = 'block';
                    sun_icon.style.display = 'none';
                
            }


         });


     });

     function responesToPhone(isSuccess) {
         // alert("运行了")
         window.webkit.messageHandlers.responesToPhone.postMessage(isSuccess);
     }
    </script>

    <script>$.init()</script>

</body>
</html>